<style lang="less" scoped>
</style>

<template>
    <div>
        <div id="myChartChina" :style="{ width: '80%', height: '80%' }"></div>
    </div>
</template>

<script>
import echarts from "echarts";

// import echarts from "echarts/lib/echarts";
// require('echarts/lib/chart/map')
// require('echarts/lib/chart/bar')
// require('echarts/lib/chart/line')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')

import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);

export default {
    name: "IPMap",
    props: {
        data: Array
    },
    watch: {
        data () {
            this.drawLine();
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            var myChartContainer = document.getElementById("myChartChina"); //绑定div容器
            var resizeMyChartContainer = function () {
                myChartContainer.style.width = 100 + "%";

                myChartContainer.style.height = window.innerHeight * 0.7 + "px";
            };
            resizeMyChartContainer();
            var myChartChina = echarts.init(myChartContainer);

            // 绘制图表
            var optionMap = {
                tooltip: {
                    trigger: "item",
                },
                visualMap: {
                    min: 0,
                    max: Math.max(...this.data.map(item => item.value)),
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                //配置属性
                series: [
                    {
                        name: "访问次数",
                        type: "map",
                        mapType: "china",
                        roam: false,
                        label: {
                            normal: {
                                show: true, //省份名称
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        data: this.data, //数据
                    },
                ],
            };
            myChartChina.setOption(optionMap);
            window.onresize = function () {
                resizeMyChartContainer();
                myChartChina.resize();
            };
        },
    },
};
</script>